<!DOCTYPE html>
<html>
<head>
<title>Fig. 6.1 Reproduction</title>
</head>
<body>
<canvas id="canvas" width="650" height="550"></canvas>
<script>
    const canvas = document.getElementById('canvas');
    const ctx = canvas.getContext('2d');

    // Style settings
    ctx.strokeStyle = 'black';
    ctx.fillStyle = 'black';
    ctx.lineWidth = 1.5;
    ctx.font = '16px Arial';
    ctx.textAlign = 'left';
    ctx.textBaseline = 'middle';

    // Helper function to draw the magnetic field symbol (cross in a circle)
    function drawBFieldSymbol(x, y, radius) {
        ctx.save();
        ctx.lineWidth = 1;
        ctx.beginPath();
        ctx.arc(x, y, radius, 0, 2 * Math.PI);
        const d = radius * Math.sin(Math.PI / 4); // distance from center to corner of inner cross
        ctx.moveTo(x - d, y - d);
        ctx.lineTo(x + d, y + d);
        ctx.moveTo(x + d, y - d);
        ctx.lineTo(x - d, y + d);
        ctx.stroke();
        ctx.restore();
    }

    // Helper function to draw a line with an arrowhead
    function drawArrow(fromx, fromy, tox, toy) {
        const headlen = 8; // length of head in pixels
        const dx = tox - fromx;
        const dy = toy - fromy;
        const angle = Math.atan2(dy, dx);
        ctx.beginPath();
        ctx.moveTo(fromx, fromy);
        ctx.lineTo(tox, toy);
        // arrowhead
        ctx.lineTo(tox - headlen * Math.cos(angle - Math.PI / 6), toy - headlen * Math.sin(angle - Math.PI / 6));
        ctx.moveTo(tox, toy);
        ctx.lineTo(tox - headlen * Math.cos(angle + Math.PI / 6), toy - headlen * Math.sin(angle + Math.PI / 6));
        ctx.stroke();
    }

    // --- Main Drawing ---

    // 1. Draw Magnetic Field
    const gridSpacing = 100;
    const gridStartX = 150;
    const gridStartY = 100;
    const radius = 10;
    for (let i = 0; i < 4; i++) {
        for (let j = 0; j < 4; j++) {
            drawBFieldSymbol(gridStartX + i * gridSpacing, gridStartY + j * gridSpacing, radius);
        }
    }

    // 2. Draw Square Coil
    const coilSide = 200;
    const coilX = 200;
    const coilY = 150;
    const inset = 4;
    ctx.save();
    ctx.lineWidth = 1;
    ctx.strokeRect(coilX, coilY, coilSide, coilSide); // Outer rectangle
    ctx.strokeRect(coilX + inset, coilY + inset, coilSide - 2 * inset, coilSide - 2 * inset); // Inner rectangle
    ctx.restore();


    // 3. Draw Wires and Terminals
    const wireStartX = coilX;
    const wireStartY = coilY + coilSide;
    const termL_X = wireStartX - 20;
    const termL_Y = wireStartY + 80;
    const termR_X = wireStartX + 50;
    const termR_Y = wireStartY + 80;

    ctx.beginPath();
    ctx.moveTo(wireStartX, wireStartY);
    ctx.quadraticCurveTo(wireStartX - 30, wireStartY + 40, termL_X, termL_Y);
    ctx.stroke();

    ctx.beginPath();
    ctx.moveTo(wireStartX, wireStartY);
    ctx.quadraticCurveTo(wireStartX + 30, wireStartY + 40, termR_X, termR_Y);
    ctx.stroke();
    
    // Draw terminals (open circles)
    ctx.save();
    ctx.fillStyle = 'white';
    ctx.beginPath();
    ctx.arc(termL_X, termL_Y, 4, 0, 2 * Math.PI);
    ctx.fill();
    ctx.stroke();
    
    ctx.beginPath();
    ctx.arc(termR_X, termR_Y, 4, 0, 2 * Math.PI);
    ctx.fill();
    ctx.stroke();
    ctx.restore();

    // 4. Draw Dimension Line and Label
    const dimLineX = 120;
    const dimTextX = 80;
    
    // Dashed lines
    ctx.save();
    ctx.lineWidth = 1;
    ctx.beginPath();
    ctx.setLineDash([5, 3]);
    ctx.moveTo(coilX, coilY);
    ctx.lineTo(dimLineX, coilY);
    ctx.moveTo(coilX, coilY + coilSide);
    ctx.lineTo(dimLineX, coilY + coilSide);
    ctx.stroke();
    
    // Vertical dimension line with arrows
    ctx.setLineDash([]);
    ctx.beginPath();
    ctx.moveTo(dimLineX, coilY);
    ctx.lineTo(dimLineX, coilY + coilSide);
    // Arrow at top
    ctx.moveTo(dimLineX, coilY);
    ctx.lineTo(dimLineX - 4, coilY + 8);
    ctx.moveTo(dimLineX, coilY);
    ctx.lineTo(dimLineX + 4, coilY + 8);
    // Arrow at bottom
    ctx.moveTo(dimLineX, coilY + coilSide);
    ctx.lineTo(dimLineX - 4, coilY + coilSide - 8);
    ctx.moveTo(dimLineX, coilY + coilSide);
    ctx.lineTo(dimLineX + 4, coilY + coilSide - 8);
    ctx.stroke();
    ctx.restore();

    // Dimension text
    ctx.textAlign = 'center';
    ctx.fillText('12 cm', dimTextX, coilY + coilSide / 2);

    // 5. Draw Labels
    ctx.textAlign = 'left';

    // Magnetic field label
    const magLabelX = 480;
    const magLabelY1 = 85;
    const magLabelY2 = 105;
    ctx.fillText('magnetic field lines', magLabelX, magLabelY1);
    ctx.fillText('into the page', magLabelX, magLabelY2);
    drawArrow(magLabelX - 5, (magLabelY1 + magLabelY2)/2, gridStartX + 3*gridSpacing + radius, gridStartY);

    // Coil label
    const coilLabelX = 480;
    const coilLabelY1 = 220;
    const coilLabelY2 = 240;
    ctx.fillText('square coil', coilLabelX, coilLabelY1);
    ctx.fillText('8 turns', coilLabelX, coilLabelY2);
    drawArrow(coilLabelX - 5, (coilLabelY1 + coilLabelY2)/2, coilX + coilSide, coilY + 80);

    // Terminals label
    ctx.textAlign = 'center';
    ctx.fillText('terminals', (termL_X + termR_X)/2 + 5, termL_Y + 25);
    
    // Figure label
    ctx.font = 'bold 16px Arial';
    ctx.fillText('Fig. 6.1', 325, 520);
</script>
</body>
</html>